let isPageFocused = document.hasFocus();

// 监听页面焦点变化
document.addEventListener('visibilitychange', () => {
  isPageFocused = !document.hidden;
});

window.addEventListener('focus', () => {
  isPageFocused = true;
});

window.addEventListener('blur', () => {
  isPageFocused = false;
});


// 添加调用 LLM 接口的方法
async function callLLMAPI(text) {
    console.log('开始调用 LLM 接口，文本内容:', text);
    
    try {
        // 从 chrome.storage 获取配置信息
        const config = await new Promise((resolve) => {
            chrome.storage.sync.get(['modelUrl', 'modelName', 'apiKey'], (result) => {
                resolve(result);
            });
        });
        
        console.log('获取到的配置信息:', config);
        
        if (!config.modelUrl || !config.modelName || !config.apiKey) {
            throw new Error('配置信息不完整，请先完成配置');
        }
        
        // 构建完整的API URL
        const apiUrl = `${config.modelUrl}/v1/chat/completions`;
        console.log('请求URL:', apiUrl);
        
        // 通过后台脚本发送请求
        const { success, data, error } = await new Promise((resolve) => {
            chrome.runtime.sendMessage({
                action: 'callLLMAPI',
                url: apiUrl,
                options: {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${config.apiKey}`
                    },
                    body: JSON.stringify({
                        "stream":false,
                        "max_tokens":4096,
                        "temperature":0.7,
                        "top_p":0.7,
                        "top_k":50,
                        "frequency_penalty":0.5,
                        "n":1,
                        'model': config.modelName,
                        'messages': text
                    })
                }
            }, (response) => {
                resolve(response);
            });
        });
        
        if (!success) {
            throw new Error(error || 'API 请求失败');
        }
        
        console.log('API 响应数据:', data);
        
        // 返回 LLM 的回复内容
        return data.choices[0].message.content;
        
    } catch (error) {
        console.error('调用 LLM 接口出错:', error);
        throw error;
    }
}

function translate2mk(resp){
  return marked.parse(resp)
}

/**
 * 生成翻译相关的prompt
 * @param {Object} allText 包含选中文本和上下文的对象
 * @returns {string} 生成的prompt
 */
function generatePrompt(allText) {
    console.log('生成 prompt，输入:', allText);
    
    const promptTemplate = `你是专业的翻译家，擅长文本的翻译和解释，"<selected>"标记的部分为待翻译的部分，结合上下文"<context>"中的内容翻译文本：

##待翻译内容：
<selected>
${allText.selectedText}
</selected>

##上下文内容：
<context>
${allText.contextText}
</context>

##请按照以下要求翻译文本：
1. 识别待翻译内容的语言类型，如果待翻译的内容是英文，则翻译为中文，如果待翻译的内容是中文，则翻译为英文。如果是其他语言，则翻译为中文。
2. 翻译时要结合上下文，不要遗漏任何重要信息。
3. 如果待翻译内容为单词或者固定短语，则介绍一下他的来源、含义。
4. 如果待翻译内容是英文，请提供其音标；如果是中文，请提供其拼音；如果是其他语言，请提供其发音标记。
5. 为了便于理解和记忆，一并提供几个简洁、有趣、利于记忆、包含待翻译内容的例句，例如待翻译内容是英文，则提供几个英文例句，待翻译内容是中文，则提供几个中文例句，其他语音以此类推。
6. ###发音和例句的语言类型必须要和待翻译内容保持一致，这很重要！！！例如，待翻译内容是英文，发音和例句也要使用对应的英文发音和英文例句。
7. 严格按照如下格式定义输出内容：
<translation>
翻译后的文本
</translation>
<pronunciation>
音标/拼音/发音标记
</pronunciation>
<history>
来源、含义
</history>
<examples>
  <example>
    sentence1
  </example>
  <example>
    sentence2
  </example>
  <example>
    sentence3
  </example>
</examples>
`
    console.log('生成的 prompt:', promptTemplate);
    return promptTemplate;
}

/**
 * 生成辅助理解相关的prompt
 * @param {string} question 用户的问题
 * @param {string} selectedText 用户选中的文本
 * @returns {string} 生成的prompt
 */
function generateAssistantPrompt(selectedText, titleText) {
    const promptTemplate = `你是一位知识渊博的助手，参考以下规则帮助用户：

## 文章的标题：
${titleText}
## 文章中部分/全部被用户选择的文本内容：
${selectedText}

## 请根据以下要求提供帮助：
1. 首先，分析用户问题的核心诉求。如果用户的问题简单明确，则不要引申过多内容。
比如用户问题是：“将这段文本为中文”。这个问题简单明确，则直接返回翻译后的内容。
较为复杂的问题则参考以下步骤处理。
2. 结合提供的文本内容，给出详细、准确的解释
3. 如果涉及专业术语，请提供通俗易懂的解释
4. 如果可能，请提供相关的背景知识或延伸阅读建议
5. 保持回答简洁明了，但不要遗漏重要信息
6. 如果问题无法从提供的文本中找到答案，请明确说明并给出可能的建议

请直接返回帮助内容，不需要包含任何额外的格式或标记。

## 接下来回答一些用户的提问。 
`;
    return promptTemplate;
}

// 添加解析 LLM 响应的函数
function parseLLMResponse(responseText) {
    console.log('开始解析 LLM 响应:', responseText);
    
    // 使用正则表达式提取各个部分
    const translation = responseText.match(/<translation>([\s\S]*?)<\/translation>/)?.[1]?.trim();
    const pronunciation = responseText.match(/<pronunciation>([\s\S]*?)<\/pronunciation>/)?.[1]?.trim();
    const history = responseText.match(/<history>([\s\S]*?)<\/history>/)?.[1]?.trim();
    const examples = responseText.match(/<examples>([\s\S]*?)<\/examples>/)?.[1]
        ?.match(/<example>([\s\S]*?)<\/example>/g)
        ?.map(example => example.match(/<example>([\s\S]*?)<\/example>/)[1].trim()) || [];
    
    console.log('解析结果:', { translation, history, examples });
    
    return {
        translation,
        pronunciation,
        history,
        examples
    };
}

// 添加创建响应展示元素的函数
function createResponseElement(parsedResponse, selectedText) {
    const container = document.createElement('div');
    container.className = 'llm-response';
    
    // 创建按钮容器
    const buttonContainer = document.createElement('div');
    buttonContainer.className = 'button-container';
    
    // 添加保存按钮
    const saveButton = document.createElement('button');
    saveButton.className = 'action-button save-button';
    saveButton.innerHTML = '保存';
    saveButton.disabled = true;
    
    // 添加记忆按钮
    const memoryButton = document.createElement('button');
    memoryButton.className = 'action-button memory-button';
    memoryButton.innerHTML = '辅助记忆';
    
    // 添加清除按钮
    const clearButton = document.createElement('button');
    clearButton.className = 'action-button clear-button';
    clearButton.innerHTML = '清除';
    
    // 添加导出按钮
    const exportButton = document.createElement('button');
    exportButton.className = 'action-button export-button';
    exportButton.innerHTML = '导出';
    
    // 添加导入按钮
    const importButton = document.createElement('button');
    importButton.className = 'action-button import-button';
    importButton.innerHTML = '导入';
    
    // 添加状态提示
    const statusMessage = document.createElement('span');
    statusMessage.className = 'status-message';
    
    // 添加故事容器
    const storyContainer = document.createElement('div');
    storyContainer.className = 'story-container';
    storyContainer.style.display = 'none';
    
    buttonContainer.appendChild(saveButton);
    buttonContainer.appendChild(memoryButton);
    buttonContainer.appendChild(clearButton);
    buttonContainer.appendChild(exportButton);
    buttonContainer.appendChild(importButton);
    
    // 添加清除按钮点击事件
    clearButton.onclick = async () => {
        try {
            // 清除chatHistory0307的记录
            await new Promise((resolve) => {
                chrome.storage.local.remove('chatHistory0307', () => {
                    resolve();
                });
            });
            statusMessage.textContent = '清除成功！';
            statusMessage.style.color = '#4CAF50';
        } catch (error) {
            statusMessage.textContent = error.message;
            statusMessage.style.color = '#f44336';
        }
        
        // 3秒后清除状态消息
        setTimeout(() => {
            statusMessage.textContent = '';
        }, 3000);
    };
    
    // 添加导出按钮点击事件
    exportButton.onclick = async () => {
        try {
            // 获取chatHistory0307的记录
            const result = await new Promise((resolve) => {
                chrome.storage.local.get(['chatHistory0307'], (result) => {
                    resolve(result);
                });
            });
            
            if (!result.chatHistory0307 || result.chatHistory0307.length === 0) {
                statusMessage.textContent = '没有可导出的数据';
                statusMessage.style.color = '#3498db';
                return;
            }
            
            // 将数据转换为JSON字符串
            const dataStr = JSON.stringify(result.chatHistory0307);
            
            // 创建Blob对象
            const blob = new Blob([dataStr], {type: 'application/json'});
            
            // 创建下载链接
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'chatHistory0307.json';
            document.body.appendChild(a);
            a.click();
            
            // 清理
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            statusMessage.textContent = '导出成功！';
            statusMessage.style.color = '#4CAF50';
        } catch (error) {
            statusMessage.textContent = error.message;
            statusMessage.style.color = '#f44336';
        }
        
        // 3秒后清除状态消息
        setTimeout(() => {
            statusMessage.textContent = '';
        }, 3000);
    };
    
    // 添加导入按钮点击事件
    importButton.onclick = () => {
        // 创建文件输入元素
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.json';
        
        input.onchange = async (e) => {
            try {
                const file = e.target.files[0];
                if (!file) return;
                
                // 读取文件内容
                const reader = new FileReader();
                reader.onload = async (e) => {
                    const content = e.target.result;
                    try {
                        // 解析JSON
                        const data = JSON.parse(content);
                        
                        // 保存到chrome.storage.local
                        await new Promise((resolve) => {
                            chrome.storage.local.set({ 'chatHistory0307': data }, () => {
                                resolve();
                            });
                        });
                        
                        statusMessage.textContent = '导入成功！';
                        statusMessage.style.color = '#4CAF50';
                    } catch (error) {
                        statusMessage.textContent = '文件格式错误';
                        statusMessage.style.color = '#f44336';
                    }
                };
                reader.readAsText(file);
            } catch (error) {
                statusMessage.textContent = error.message;
                statusMessage.style.color = '#f44336';
            }
            
            // 3秒后清除状态消息
            setTimeout(() => {
                statusMessage.textContent = '';
            }, 3000);
        };
        
        // 触发文件选择
        input.click();
    };
    
    // 设置记忆按钮点击事件
    memoryButton.onclick = async () => {
        try {
            // 获取配置信息
            const config = await new Promise((resolve) => {
                chrome.storage.sync.get(['modelUrl'], (result) => {
                    resolve(result);
                });
            });
            
            if (!config.modelUrl) {
                throw new Error('请先配置模型 URL');
            }
            
            // 从本地存储获取保存的文本列表
            const result = await new Promise((resolve) => {
                chrome.storage.local.get(['chatHistory0307'], (result) => {
                    resolve(result);
                });
            });
            
            const chatHistory0307 = result.chatHistory0307 || [];
            
            if (chatHistory0307.length === 0) {
                statusMessage.textContent = '没有要学习的单词，请先保存一些单词';
                statusMessage.style.color = '#3498db';
                return;
            }
            
            statusMessage.textContent = '正在使用保存的单词生成故事...';
            statusMessage.style.color = '#3498db';
            
            // 使用保存的文本作为单词列表
            const words = chatHistory0307;
            
            // 生成故事 prompt
            const storyPrompt = `请使用以下单词列表创作一个有趣、简单且引人入胜的小故事。故事应该自然地包含这些单词，让读者能在上下文中理解这些单词的含义：

            ###单词列表：${words.join(', ')}

            ###要求：
            1. 故事应该简短精悍,故事尽量使用小学生懂知道的单词，故事长度最长不超过单词列表中单词总长度的10倍。
            2. 故事情节要有趣且容易理解，让人印象深刻。
            3. 确保所有单词都自然地融入故事中
            4. 在故事结束后，用一句话总结这个故事想表达的主题
            5. 故事必须包含列表中的所有单词
            6. 仅仅返回故事内容，不要输出任何其他内容
            7. 重点！！！故事所使用的语言种类需要和单词列表中单词的语言一致，比如单词列表中的单词是英文，则用英文写这个故事，其他类推。
            `;

            statusMessage.textContent = '正在生成故事...';
            
            // 以数组形式调用 LLM API
            const messages = [{
                role: "user",
                content: storyPrompt
            }];
            
            // 调用 LLM 生成故事
            const storyResponse = await callLLMAPI(messages);
            
            // 高亮显示故事中的关键单词
            const highlightedStory = highlightKeywords(storyResponse, words);
            const highlightedStoryMk = marked.parse(highlightedStory); 
            // 显示故事
            storyContainer.style.display = 'block';
            storyContainer.innerHTML = `
                <h3>记忆故事</h3>
                <div class="story-content">${highlightedStoryMk}</div>
            `;
            
            statusMessage.textContent = '故事生成成功！';
            statusMessage.style.color = '#4CAF50';
            
            // 3秒后清除状态消息
            setTimeout(() => {
                statusMessage.textContent = '';
            }, 3000);
            
        } catch (error) {
            statusMessage.textContent = error.message;
            statusMessage.style.color = '#f44336';
        }
    };
    
    // 设置保存按钮点击事件
    saveButton.onclick = async () => {
        try {
            // 获取当前保存的文本列表
            const result = await new Promise((resolve) => {
                chrome.storage.local.get(['chatHistory0307'], (result) => {
                    resolve(result);
                });
            });
            
            // 初始化列表如果不存在
            const chatHistory0307 = result.chatHistory0307 || [];
            const selectedText = document.querySelector('.selected-text').textContent
            // 检查是否已存在相同内容
            if (!chatHistory0307.includes(selectedText)) {
                // 添加新文本到列表
                chatHistory0307.push(selectedText);
                
                // 保存更新后的列表
                await new Promise((resolve) => {
                    chrome.storage.local.set({ chatHistory0307 }, () => {
                        resolve();
                    });
                });
                
                statusMessage.textContent = '保存成功！';
                statusMessage.style.color = '#4CAF50';
            } else {
                statusMessage.textContent = '内容已存在，无需重复保存';
                statusMessage.style.color = '#3498db';
            }
        } catch (error) {
            statusMessage.textContent = error.message;
            statusMessage.style.color = '#f44336';
        }
        
        // 3秒后清除状态消息
        setTimeout(() => {
            statusMessage.textContent = '';
        }, 3000);
    };
    
    // 启用保存按钮
    saveButton.disabled = false;
    
    // 翻译结果部分
    const translationSection = document.createElement('div');
    translationSection.className = 'translation-section';
    translationSection.innerHTML = `
        <h3>翻译</h3>
        <div class="translation-content">${parsedResponse.translation || '无翻译结果'}</div>
        ${parsedResponse.pronunciation ? `
        <div style="margin-top: 15px;">
            <h3>发音</h3>
            <div class="pronunciation-section">
                <div class="pronunciation-content">${parsedResponse.pronunciation}</div>
            </div>
        </div>` : ''}
    `;
    
    // 历史/含义部分
    const historySection = document.createElement('div');
    historySection.className = 'history-section';
    historySection.innerHTML = `
        <h3>含义</h3>
        <div class="history-content">${parsedResponse.history || '无相关含义'}</div>
    `;
    
    // 例句部分
    const examplesSection = document.createElement('div');
    examplesSection.className = 'examples-section';
    examplesSection.innerHTML = `
        <h3>例句</h3>
        <ul class="examples-list">
            ${parsedResponse.examples.map(example => `
                <li class="example-item">${example}</li>
            `).join('') || '<li>无例句</li>'}
        </ul>
    `;
    
    // 将按钮容器和状态消息添加到主容器
    container.appendChild(buttonContainer);
    container.appendChild(statusMessage);
    container.appendChild(storyContainer);
    container.appendChild(translationSection);
    container.appendChild(historySection);
    container.appendChild(examplesSection);
    
    // 添加数据属性，方便后续提取
    container.dataset.translation = parsedResponse.translation;
    container.dataset.pronunciation = parsedResponse.pronunciation;
    container.dataset.history = parsedResponse.history;
    container.dataset.examples = JSON.stringify(parsedResponse.examples);
    
    return container;
}

// 添加高亮关键单词的函数
function highlightKeywords(text, keywords) {
    // 创建正则表达式，匹配所有关键词，不区分大小写
    const regex = new RegExp(`(${keywords.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'gi');
    
    // 用高亮span替换匹配的关键词
    return text.replace(regex, '<span class="highlighted-word">$1</span>');
}



// 添加辅助理解侧边栏功能
function createAssistantSidebar(allText) {
  // 移除已存在的侧边栏
  const existingSidebar = document.querySelector('.assistant-sidebar');
  if (existingSidebar) {
    existingSidebar.remove();
  }

  // 创建新的侧边栏
  const sidebar = document.createElement('div');
  sidebar.className = 'assistant-sidebar';
  
  // 添加调整大小的手柄
  const resizeHandle = document.createElement('div');
  resizeHandle.className = 'resize-handle';
  
  // 添加关闭按钮
  const closeButton = document.createElement('button');
  closeButton.className = 'close-button';
  closeButton.innerHTML = '×';
  closeButton.onclick = () => sidebar.remove();
  
  // 添加内容容器
  const content = document.createElement('div');
  content.className = 'assistant-content';
  
  // 添加选中文本显示区域
  const selectedTextContainer = document.createElement('div');
  selectedTextContainer.className = 'selected-text-container';
  selectedTextContainer.style.maxHeight = '200px';  // 设置最大高度
  selectedTextContainer.style.overflowY = 'auto';   // 添加垂直滚动条
  selectedTextContainer.style.padding = '15px';
  selectedTextContainer.style.borderRadius = '8px';
  selectedTextContainer.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
  selectedTextContainer.style.border = '1px solid #e0e0e0';
  selectedTextContainer.style.background = 'linear-gradient(45deg, #f5f7fa, #e6e9ef)';
  
  const selectedTextDiv = document.createElement('div');
  selectedTextDiv.className = 'selected-text';
  selectedTextDiv.textContent = allText.selectedText;
  selectedTextDiv.style.whiteSpace = 'pre-wrap';    // 保留换行和空白
  selectedTextDiv.style.wordWrap = 'break-word';    // 长单词自动换行
  selectedTextDiv.style.fontSize = '15px';
  selectedTextDiv.style.lineHeight = '1.6';
  selectedTextDiv.style.color = '#2c3e50';
  
  selectedTextContainer.appendChild(selectedTextDiv);
  content.appendChild(selectedTextContainer);
  
  // 添加对话容器
  const chatContainer = document.createElement('div');
  chatContainer.className = 'chat-container';
  
  // 添加消息显示区域
  const messagesDiv = document.createElement('div');
  messagesDiv.className = 'chat-messages';
  chatContainer.appendChild(messagesDiv);
  
  // 添加输入区域
  const inputContainer = document.createElement('div');
  inputContainer.className = 'chat-input-container';
  
  const input = document.createElement('textarea');
  input.className = 'chat-input';
  input.placeholder = '输入你的问题...';
  
  const sendButton = document.createElement('button');
  sendButton.className = 'chat-send-button';
  sendButton.textContent = '发送';
  
  // 生成类似 UUID 的随机字符串作为对话历史存储的 key
  window.chatHistory = [];
  sendButton.onclick = async () => {
    const question = input.value.trim();
    if (!question) return;
    
    // 禁用发送按钮并显示加载动画
    sendButton.disabled = true;
    sendButton.innerHTML = '发送中...';
    sendButton.style.cursor = 'not-allowed';
    
    // 添加用户消息
    const userMessage = document.createElement('div');
    userMessage.className = 'chat-message user-message';
    userMessage.textContent = question;
    messagesDiv.appendChild(userMessage);
    
    // 清空输入框
    input.value = '';
    
    try {
      const selectedText = document.querySelector('.selected-text').textContent;
      const titleText = document.title; // 获取网页标题
      if (window.chatHistory.length == 0){
        window.chatHistory = [{
          role: "user",
          content: generateAssistantPrompt(selectedText, titleText)
        }];
      }
      
      // 添加新问题到对话历史
      window.chatHistory.push({
        role: "user",
        content: question
      });
      let retryCount = 0;
      const MAX_RETRIES = 1;
      while (retryCount <= MAX_RETRIES) {
        try{
            // 调用LLM API获取响应
            const response = await callLLMAPI(window.chatHistory);
            if (!response) {
                throw new Error('LLM返回空响应');
            }
            // 添加LLM回复到对话历史
            window.chatHistory.push({
                role: "assistant",
                content: response
            });
            
            // 添加LLM回复
            const botMessage = document.createElement('div');
            botMessage.className = 'chat-message bot-message';
            try {
                const mk = translate2mk(response)
                botMessage.innerHTML = mk;
                messagesDiv.appendChild(botMessage);
            } catch (error) {
                console.error('Marked parsing failed:', error);
                botMessage.textContent = response; // Fallback to plain text
                messagesDiv.appendChild(botMessage);
            }
            // 成功则跳出循环
            break;
        } catch (error) {
            console.error(`调用LLM失败 (尝试次数: ${retryCount + 1}):`, error);
            if (retryCount >= MAX_RETRIES) {
            // 最后一次尝试仍然失败，显示错误信息
            const errorMessage = document.createElement('div');
            errorMessage.className = 'chat-message bot-message';
            errorMessage.textContent = `请求失败，请稍后重试。错误信息: ${error.message}`;
            messagesDiv.appendChild(errorMessage);
            }
            retryCount++;
        }
      }
      
    } catch (error) {
      console.error('调用LLM失败:', error);
    } finally {
      // 恢复发送按钮状态
      sendButton.disabled = false;
      sendButton.innerHTML = '发送';
      sendButton.style.cursor = 'pointer';
    }
  };
  
  inputContainer.appendChild(input);
  inputContainer.appendChild(sendButton);
  chatContainer.appendChild(inputContainer);
  
  content.appendChild(chatContainer);
  sidebar.appendChild(resizeHandle);
  sidebar.appendChild(closeButton);
  sidebar.appendChild(content);
  
  // 添加样式表
  const styleLink = document.createElement('link');
  styleLink.rel = 'stylesheet';
  styleLink.href = chrome.runtime.getURL('styles/sidebar.css');
  document.head.appendChild(styleLink);

  // 将侧边栏添加到页面
  document.body.appendChild(sidebar);

  // 实现调整大小功能
  let isResizing = false;
  let startX;
  let startWidth;

  resizeHandle.addEventListener('mousedown', (e) => {
    isResizing = true;
    startX = e.clientX;
    startWidth = sidebar.offsetWidth;
    
    // 添加resizing类到body，防止文本选择
    document.body.classList.add('resizing');
  });

  document.addEventListener('mousemove', (e) => {
    if (!isResizing) return;
    
    // 计算新宽度（注意是从右向左调整）
    const width = startWidth + (startX - e.clientX);
    
    // 限制最小和最大宽度
    if (width >= 200 && width <= 800) {
      sidebar.style.width = width + 'px';
    }
  });

  document.addEventListener('mouseup', () => {
    isResizing = false;
    document.body.classList.remove('resizing');
  });
}

// 添加侧边栏相关功能
function createSidebar(allText) {
  // 移除已存在的侧边栏
  const existingSidebar = document.querySelector('.immersive-sidebar');
  if (existingSidebar) {
    existingSidebar.remove();
  }

  // 创建新的侧边栏
  const sidebar = document.createElement('div');
  sidebar.className = 'immersive-sidebar';
  
  // 添加调整大小的手柄
  const resizeHandle = document.createElement('div');
  resizeHandle.className = 'resize-handle';
  
  // 添加关闭按钮
  const closeButton = document.createElement('button');
  closeButton.className = 'close-button';
  closeButton.innerHTML = '×';
  closeButton.onclick = () => sidebar.remove();
  
  // 添加内容容器
  const content = document.createElement('div');
  content.className = 'immersive-content';
  
  // 添加选中文本容器
  const selectedTextContainer = document.createElement('div');
  selectedTextContainer.className = 'selected-text-container';
  selectedTextContainer.style.maxHeight = '200px';  // 设置最大高度
  selectedTextContainer.style.overflowY = 'auto';   // 添加垂直滚动条
  selectedTextContainer.style.padding = '15px';
  selectedTextContainer.style.borderRadius = '8px';
  selectedTextContainer.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
  selectedTextContainer.style.border = '1px solid #e0e0e0';
  selectedTextContainer.style.background = 'linear-gradient(45deg, #f5f7fa, #e6e9ef)';
  
  const selectedTextDiv = document.createElement('div');
  selectedTextDiv.className = 'selected-text';
  selectedTextDiv.textContent = allText.selectedText;
  selectedTextDiv.style.whiteSpace = 'pre-wrap';    // 保留换行和空白
  selectedTextDiv.style.wordWrap = 'break-word';    // 长单词自动换行
  selectedTextDiv.style.fontSize = '15px';
  selectedTextDiv.style.lineHeight = '1.6';
  selectedTextDiv.style.color = '#2c3e50';
  
  selectedTextContainer.appendChild(selectedTextDiv);
  content.appendChild(selectedTextContainer);

  // 在内容后面添加 LLM 响应区域
  const llmResponseDiv = document.createElement('div');
  llmResponseDiv.className = 'llm-response';
  llmResponseDiv.textContent = '正在翻译...';
  content.appendChild(llmResponseDiv);
  
  // 调用 LLM API
  const prompt = generatePrompt(allText);
  const messages = [{
    role: "user",
    content: prompt
  }];
  callLLMAPI(messages)
    .then(response => {
      const parsedResponse = parseLLMResponse(response);
      const responseElement = createResponseElement(parsedResponse, allText.selectedText);
      llmResponseDiv.replaceWith(responseElement);
    })
    .catch(error => {
      llmResponseDiv.textContent = `调用 LLM 失败: ${error.message}`;
    });
  
  // 组装侧边栏
  sidebar.appendChild(resizeHandle);
  sidebar.appendChild(closeButton);
  sidebar.appendChild(content);
  
  // 添加样式表
  const styleLink = document.createElement('link');
  styleLink.rel = 'stylesheet';
  styleLink.href = chrome.runtime.getURL('styles/sidebar.css');
  document.head.appendChild(styleLink);

  // 等待样式加载完成后再显示侧边栏
  styleLink.onload = () => {
    // 将侧边栏添加到页面
    document.body.appendChild(sidebar);
    
    // 添加一些基本样式以确保侧边栏可见
    sidebar.style.position = 'fixed';
    sidebar.style.top = '0';
    sidebar.style.right = '0';
    sidebar.style.height = '100vh';
    sidebar.style.backgroundColor = 'white';
    sidebar.style.boxShadow = '-2px 0 5px rgba(0,0,0,0.1)';
    sidebar.style.zIndex = '9999';
    sidebar.style.width = '300px';
    sidebar.style.minWidth = '200px';
    sidebar.style.maxWidth = '800px';
    sidebar.style.padding = '20px';
    sidebar.style.boxSizing = 'border-box';
    sidebar.style.display = 'block';
    
    // 确保侧边栏在最上层
    sidebar.style.willChange = 'transform';
  };

  // 实现调整大小功能
  let isResizing = false;
  let startX;
  let startWidth;

  resizeHandle.addEventListener('mousedown', (e) => {
    isResizing = true;
    startX = e.clientX;
    startWidth = sidebar.offsetWidth;
    
    // 添加resizing类到body，防止文本选择
    document.body.classList.add('resizing');
  });

  document.addEventListener('mousemove', (e) => {
    if (!isResizing) return;
    
    // 计算新宽度（注意是从右向左调整）
    const width = startWidth + (startX - e.clientX);
    
    // 限制最小和最大宽度
    if (width >= 200 && width <= 800) {
      sidebar.style.width = width + 'px';
    }
  });

  document.addEventListener('mouseup', () => {
    isResizing = false;
    document.body.classList.remove('resizing');
  });
}

// 监听来自背景脚本的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'showSidebar') {
    const selectedText = window.getSelection().toString();
    const allText = getSelectedTextWithContext()
    if (allText) {
      createSidebar(allText);
    }
  } else if (request.action === 'showAssistantSidebar') {
    const selectedText = window.getSelection().toString();
    const allText = getSelectedTextWithContext()
    if (allText) {
      createAssistantSidebar(allText);
    }
  }
});

function getSelectedTextWithContext() {
    const selection = window.getSelection();
    const selectedText = selection.toString().trim();
    console.log('选中的文本:', selectedText);
    
    if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        let selectedElement = range.commonAncestorContainer;
        
        // 如果选中的是文本节点，获取其父元素
        if (selectedElement.nodeType === Node.TEXT_NODE) {
            selectedElement = selectedElement.parentElement;
        }
        
        console.log('选中元素:', selectedElement);
        
        // 获取前一个和后一个兄弟元素的文本
        const prevSibling = selectedElement.previousElementSibling;
        const nextSibling = selectedElement.nextElementSibling;
        
        console.log('前一个兄弟元素:', prevSibling);
        console.log('后一个兄弟元素:', nextSibling);
        
        const prevText = prevSibling ? prevSibling.textContent.trim() : '';
        const currentText = selectedElement.textContent.trim();
        const nextText = nextSibling ? nextSibling.textContent.trim() : '';
        
        console.log('前一个文本:', prevText);
        console.log('当前元素文本:', currentText);
        console.log('后一个文本:', nextText);
        
        const contextText = [prevText, currentText, nextText]
            .filter(text => text.length > 0)
            .join('\n---\n');
            
        console.log('完整上下文文本:', contextText);
        
        return {
            selectedText: selectedText,
            contextText: contextText
        };
    }
    
    console.log('未能获取到选区范围，只返回选中文本');
    return {
        selectedText: selectedText,
        contextText: selectedText
    };
}

